<template>
  <div class="silence">
    <div class="silence_list">
      <div class="silence_tableData">
        <el-row :gutter="24">
          <el-col :span="1.1" v-for="(item, index) in tableData" :key="index">
            <div :class="selectIndex == index ? 'silence-meun-active' : 'silence-meun'">
              <img :src="'https://guopei.bj.bcebos.com'+item.avatar" class="userInfo_avatar"/>
              <label :class="selectIndex == index ? 'userInfo_active' : 'userInfo_label'">{{ item.studentName }}</label>
            </div>
          </el-col>
        </el-row>

      </div>
    </div>
    <!-- 随机点名 -->
    <div class="randomMenu">
      <a-button type="primary" class="randomMenu_btn" @click="clickSjdmBtn" :disabled="sjdmDisabled">{{ sjdmName }}</a-button>
    </div>
    <a-empty description="暂无数据" v-if="tableData.length === 0" />
  </div>
</template>


<script>
import {getNames,} from '@/api/apiz'

export default {
  name: '',
  components: {},
  data() {
    return {
      sjdmName: "开始点名",
      classId: '',
      sjdmDisabled: false, //随机点名的是否禁用
      tableData: [],
      flag: false,
      interval: '',
      selectIndex: [],
    }
  },
  created() {

  },
  mounted() {
    this.getNamesData(this.classId);
  },
  methods: {
    async getNamesData(id) {
      let parms = {
        classId: id
      }
      let res = await getNames(parms);
      if (res.code == 200 || res.code == '200') {
        this.tableData = res.result
      }
    },
    clickSjdmBtn() {
      this.random();
    },
    random() {
      this.flag = !this.flag;

      if (this.flag) {
        //获取人数
        const number = this.tableData.length - 1;
        //按钮名称改变
        this.sjdmName = "停止";
        this.interval = setInterval(() => {
          //获得随机数
          let newIndex = Math.round(Math.random() * number);
          this.selectIndex = newIndex;
        }, 50);
      } else {
        //将按钮置为禁用状态
        this.sjdmDisabled = true;
        //停止循环
        clearInterval(this.interval);
        //500毫秒之后运行一次， 在这里停顿一下，能看清具体选到哪里了0.
        setTimeout(() => {
          //按钮名称改变
          this.sjdmName = "开始点名";
          //启用按钮
          this.sjdmDisabled = false;
        }, 100);
      }
    },
    randomForArr(arr, count = 1) {
      let _arr = [...arr] // 浅拷贝数组
      let items = []
      for (let i = 0; i < count; i++) {
        if (_arr.length > 0) {
          let rand = Math.floor(Math.random() * _arr.length)
          items.push(_arr[rand])
          _arr.splice(rand, 1)
        } else {
          break
        }
      }
      items.sort((a, b) => a.index - b.index)
      return items
    }

  }
}


</script>
<style scoped lang="less">
.silence_list{
  height: calc(100vh - 280px);
  background: #f3f3f3;
  margin-top: 20px;
  margin-right: 20px;
  border-radius: 10px;
  padding: 10px 15px;
}
.silence_tableData{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.silence-meun{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 103.5px;
  height: 45px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.silence-meun-active{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 103.5px;
  height: 45px;
  background: #0a6cda;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  border-radius: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.userInfo_avatar{
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.userInfo_label{
  font-size: 14px;
  color: #555555;
  margin-left: 10px;
  letter-spacing: 2px;
}
.userInfo_active{
  font-size: 14px;
  color: #ffffff;
  margin-left: 10px;
  letter-spacing: 2px;
}
.randomMenu{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.randomMenu_btn{
  width:240px;
}
</style>
